<template>
  <div>
    <!--value-format="yyyy/MM/dd"  指定传回数据库的格式  不加  后端拿不到时间-->
    <el-row>
      <el-col :span="11" :offset="1">
        <el-row>
          <el-col :span="8" :offset="6">
            <el-date-picker
              v-model="datatime"
              @change="getdate()"
              value-format="yyyy/MM/dd"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div id="main" style="width: 600px;height:400px;background-color:#ffffff"></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-row></el-row>
        <br>
        <el-row>
          <img src="src/caoke/image/logoico.jpg" style="width: 220px;height: 220px">
        </el-row>
        <el-row>
          <div>
            <el-switch
              @change="updateBYisCloseUpShopBoolean"
              v-model="user.isCloseUpShopBoolean"
              active-text="开店"
              inactive-text="打烊">
            </el-switch>
          </div>
        </el-row>
        <el-row><!--{{nowTime}}--></el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: "revenue",
    data() {
      return {
        datatime: "",
        companyRunningWater: [],
        data1: [],
        data2: [],
        user: {
          isCloseUpShopBoolean: ""
        },
        nowTime:''
      }
    },
    methods: {
      //显示是否开店
      getuser() {
        this.$axios.get("usersbyid.action/" + sessionStorage.getItem("id")).then(val => {
          this.user.isCloseUpShop = val.data.isCloseUpShop;
          this.user.id = val.data.id;
          if (this.user.isCloseUpShop == 1) {
            this.user.isCloseUpShopBoolean = true;
          } else {
            this.user.isCloseUpShopBoolean = false;
          }
        }).catch(error => {
          this.$message.error(error)
        })
      },
      //根据页面的按钮来是否开店
      updateBYisCloseUpShopBoolean() {
        let isCloseUpShop = this.user.isCloseUpShopBoolean == true ? 0 : 1
        let obj={
          id:this.user.id,
          isCloseUpShop:isCloseUpShop
        }
          this.$axios.put("updateBYisCloseUpShop.action",obj).then(res => {
            if (res.data.code == 1) {
              this.$message.success(res.data.msg)
            } else {
              this.$message.success(res.data.msg)
            }
        }).catch(error => {
          this.$message.error(error)
        })
      },
      getdate() {
        let params = {}
        params["startTime"] = this.datatime[0];
        params["endTime"] = this.datatime[1];
        params["loginUserId"] = sessionStorage.getItem("id")
        this.$axios.get("queryAllys.action", {params: params}).then(res => {
          if (res.data.length > 0) {
            this.data1 = [];
            this.data2 = [];
            this.companyRunningWater = res.data;
            this.companyRunningWater.forEach(item => {
              this.data1.push(item.rdate);
              this.data2.push(item.rmoney)
            })
          } else {
            this.data1 = [];
            this.data2 = [];
            this.$message.warning("暂无数据")
          }
          this.get()
        }).catch(error => {
          this.$message.error(error)
        })
      },
      get() {
        var _this = this
        var echarts = require('echarts');
        var myChart = echarts.init(document.getElementById('main'));

        // 绘制图表
        let data = {
          title: {
            text: '商户营收'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },

          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: _this.data1
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '收入',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: _this.data2
            }
          ]
        };
        myChart.setOption(data);
      },
      timeFormate(timeStamp) {
        let year = new Date(timeStamp).getFullYear();
        let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
        let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
        let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
        let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
        let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
        this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ':' + ss ;
      },
      nowTimes(){
        this.timeFormate(new Date());
        setInterval(this.nowTimes,1000);
        this.clear()
      },
      clear(){
        clearInterval(this.nowTimes)
        this.nowTimes =